﻿<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>jquery 模板标签DEMO</title>
<script type="text/javascript" src="/js/lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
</head>
<body>
<!--dom-->
jQuery的模板：例子
<hr/>
演示:本地数据渲染
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
	<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
	$(function(){
		var movies = [
			{ Name: "The Red Violin", ReleaseYear: "1998" },
			{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
			{ Name: "The Inheritance", ReleaseYear: "1976" }
		];
		$( "#movieTemplate" )
			.tmpl( movies )
			.appendTo( "#movieList" );
	})
</script>
<hr/>
演示:本地异步数据模板渲染
<ul id="movieList2"></ul>
<script id="movieTemplate2" type="text/x-jquery-tmpl">
	<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			dataType:"json",
			url:"data/item.txt",
			success:function(data){
				var movies = data;
				console.dir(movies);
				$( "#movieTemplate2" )
					.tmpl( movies )
					.appendTo( "#movieList2" );
			}
		})
	})
</script>
<hr/>
演示：远程数据模板渲染
<ul id="demo"></ul>
<script id="demoTem" type="text/x-jquery-tmpl">
	<li><b>${name}</b> ${nick}</li>
</script>
<script type="text/javascript">
	$(function(){
		$.getJSON("http://active.zol.com.cn/guofeng/profile2.php?callback=?",
			function(data){
				var data = data;
				$( "#demoTem" )
					.tmpl( data )
					.appendTo("#demo")
			}
		)
	})
</script>
<hr/>
${} //打印值
<hr/>
{{html }} //打印HTML字符串
<hr/>
{{if Languages}} //if else<br />
{{else Blanguages}}<br />
{{else}}<br />
{{/if}}<br />
<hr/>
{{each(i,o) Languages}} //each<br />
{{/each}}
<hr/>
{{tmpl(Languages) "#languageTemplate"}} //模板嵌套
<hr/>
<!--/dom-->
	

<script type="text/javascript">
$(function(){

})
</script>
</body>
</html>

